<layout:basic/>

<component:application.module.admin.library.component.Datatable id="userlist" title="系统用户管理" width="12">
    <button id="addmenu" class="btn btn-default"><i class="fa fa-plus"></i> 添加用户</button>
    <button id="refreshmenu" class="btn btn-default"><i class="fa fa-refresh"></i> 刷新列表</button>
</component:application.module.admin.library.component.Datatable>

<div id="mlModal" style="display: none">
    <form class="form-horizontal" role="form" id="mlForm">
        <div class="form-group">
            <label class="col-sm-1 control-label">username</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" name="username">
            </div>

            <label class="col-sm-1 control-label">email</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" name="email">
            </div>
            <label class="col-sm-1 control-label">sex</label>
            <div class="col-sm-3">
                <select class="form-control" name="sex">
                    <option value="F">女</option>
                    <option value="M" data-default>男</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">phone</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" name="phone">
            </div>
            <label class="col-sm-1 control-label">nickname</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" name="nickname">
            </div>
            <label class="col-sm-1 control-label">birthday</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" name="birthday">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">status</label>
            <div class="col-sm-3">
                <select class="form-control" name="disable">
                    <option value="1">禁用</option>
                    <option value="0" data-default>启用</option>
                </select>
            </div>
        </div>
    </form>
</div>
<script>
    $(function () {
        var page = (function () {
            return {
                onclick: {
                    ".act-disable": function (ele, dtables, modal, form) {
                        var tr = ele.closest("tr");
                        $.get("__PUBLIC__/admin/user/disable", dtables.data(tr), function (data) {
                            isea.notify.show(data.message);
                            if (data.status) {
                                dtables.update(data.data, tr);
                            }
                        });
                    },
                    ".act-enable": function (ele, dtables, modal, form) {
                        var tr = ele.closest("tr");
                        $.get("__PUBLIC__/admin/user/enable", dtables.data(tr), function (data) {
                            isea.notify.show(data.message);
                            if (data.status) {
                                dtables.update(data.data, tr);
                            }
                        });
                    }
                },
                selector: {
                    /** 选择器 */
                    modal: "#mlModal",
                    table: "#userlist",
                    form: "#mlForm",
                    /** 事件触发器 */
                    trigger: {
                        /** 表格外部*/
                        add: "#addmenu",
                        refresh: "#refreshmenu",
                        /** 表格内部：元素直接相关 */
                        update: ".act-update",
                        remove: ".act-delete"
                    }
                },
                tableOptions: [
                    {
                        title: '用户ID',
                        data: 'id',
                        width: "6%"
                    },
                    {
                        title: '账户名称',
                        data: 'username',
                        width: "6%"
                    },
                    {
                        title: '电子邮件',
                        data: 'email',
                        width: "6%"
                    },
                    {
                        title: '手机',
                        data: 'phone',
                        width: "6%"
                    },
                    {
                        title: '昵称',
                        data: 'nickname',
                        width: "6%"
                    },
                    {
                        title: '性别',
                        data: function (row) {
                            switch (row.sex) {
                                case "M":
                                    return "男";
                                case "F":
                                    return "女";
                                default:
                                    return "-";
                            }
                        },
                        width: "6%"
                    },
                    {
                        title: '生日',
                        data: 'birthday',
                        width: "6%"
                    },
                    {
                        title: '启用情况',
                        data: function (row) {
                            switch (parseInt(row.disable)) {
                                case 0:
                                    return "启用";
                                case 1:
                                    return "禁用";
                                default:
                                    return " * " + row.disable + " * ";
                            }
                        },
                        width: "6%"
                    }, {
                        title: '操作',
                        data: function (row) {
                            var html = "<button class='btn btn-default btn-xs act-update'>修改</button> ";

                            switch (parseInt(row.disable)) {
                                case 0:
                                    html += "<button class='btn btn-danger btn-xs act-disable'>禁用</button>";
                                    break;
                                case 1:
                                    html += "<button class='btn btn-warning btn-xs act-enable'>启用</button>";
                                    break;
                                default:
                                    html += " * " + row.disable + " * ";
                            }
                            return html;
                        },
                        width: "16%"
                    }
                ],
                url: {
                    /** 增删改查URL地址 */
                    update: "__PUBLIC__/admin/user/update",
                    remove: "__PUBLIC__/admin/user/delete",
                    refresh: "__PUBLIC__/admin/user/getlist",
                    add: "__PUBLIC__/admin/user/add"
                }
            };
        })();
        isea.bundle.init("table", page);
    });
</script>
